From: Sebastian Keller <skeller@gnome.org>
Date: Sun, 14 Jun 2020 04:14:57 +0000 (+0200)
Subject: workspace: Use invisible guide actor to center overlay title on border
X-Git-Tag: archive/raspbian/50.5-1+rpi1~1^2~684^2^2~261
X-Git-Url: https://dgit.raspbian.org/%22http://www.example.com/cgi/%22/%22http:/www.example.com/cgi/%22?a=commitdiff_plain;h=9b22f6183feed55c10d888c1b296b200396dc540;p=gnome-shell.git

workspace: Use invisible guide actor to center overlay title on border

Using CSS to center the title actor on the border is a bit ugly, because
it requires the CSS to match the calculations used in chromeHeights().
Also it is not possible to use CSS margins for cases where the position
of the actor is determined at run time, such as for the close button.

Instead use an invisible actor that spans between the horizontal and
vertical center lines of the border as guide when aligning the title
actor.

https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1313
---

diff --git a/data/theme/gnome-shell-sass/widgets/_window-picker.scss b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
index 2425e22bd..48d6f73f5 100644
--- a/data/theme/gnome-shell-sass/widgets/_window-picker.scss
+++ b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
@@ -35,7 +35,6 @@ $window_clone_border_size: 6px;
 
 // Window titles
 .window-caption {
-  margin-top: $window_clone_border_size / 2;
   color: $osd_fg_color;
   background-color: $osd_bg_color;
   border:1px solid $osd_outer_borders_color;
diff --git a/js/ui/workspace.js b/js/ui/workspace.js
index 9d8f8db7a..54cbb5e9f 100644
--- a/js/ui/workspace.js
+++ b/js/ui/workspace.js
@@ -283,6 +283,19 @@ var WindowClone = GObject.registerClass({
             align_axis: Clutter.AlignAxis.BOTH,
             factor: 0.5,
         }));
+        this._borderCenter = new Clutter.Actor();
+        this._border.bind_property('visible', this._borderCenter, 'visible',
+            GObject.BindingFlags.SYNC_CREATE);
+        this._borderCenterConstraint = new Clutter.BindConstraint({
+            source: this._windowContainer,
+            coordinate: Clutter.BindCoordinate.SIZE,
+        });
+        this._borderCenter.add_constraint(this._borderCenterConstraint);
+        this._borderCenter.add_constraint(new Clutter.AlignConstraint({
+            source: this._windowContainer,
+            align_axis: Clutter.AlignAxis.BOTH,
+            factor: 0.5,
+        }));
         this._border.connect('style-changed',
             this._onBorderStyleChanged.bind(this));
 
@@ -292,13 +305,17 @@ var WindowClone = GObject.registerClass({
             text: this._getCaption(),
             reactive: true,
         });
+        this._title.add_constraint(new Clutter.BindConstraint({
+            source: this._borderCenter,
+            coordinate: Clutter.BindCoordinate.POSITION,
+        }));
         this._title.add_constraint(new Clutter.AlignConstraint({
-            source: this._windowContainer,
+            source: this._borderCenter,
             align_axis: Clutter.AlignAxis.X_AXIS,
             factor: 0.5,
         }));
         this._title.add_constraint(new Clutter.AlignConstraint({
-            source: this._windowContainer,
+            source: this._borderCenter,
             align_axis: Clutter.AlignAxis.Y_AXIS,
             pivot_point: new Graphene.Point({ x: -1, y: 0.5 }),
             factor: 1,
@@ -337,6 +354,7 @@ var WindowClone = GObject.registerClass({
         }));
         this._closeButton.connect('clicked', () => this.deleteAll());
 
+        this.add_child(this._borderCenter);
         this.add_child(this._border);
         this.add_child(this._title);
         this.add_child(this._closeButton);
@@ -376,6 +394,7 @@ var WindowClone = GObject.registerClass({
         // Increase the size of the border actor so the border outlines
         // the bounding box
         this._borderConstraint.offset = this._borderSize * 2;
+        this._borderCenterConstraint.offset = this._borderSize;
     }
 
     _windowCanClose() {